<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <!-- 请选择房间 -->
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="data.roomList.defaultActive"
          placeholder="请选择房间"
          style="width: 240px"
          @change="roomListSelect"
          :loading="data.loading.loadingRoomList"
        >
          <el-option
            v-for="item in data.roomList.data"
            :key="item.value"
            :label="item.room_name"
            :value="item.room_id"
          />
        </el-select>
      </div>
      <!-- 请选择直播场次 -->
      <div>
        <!-- 选择器 -->
        <el-select
          v-model="data.recordList.defaultActive"
          placeholder="请选择直播场次"
          style="width: 240px"
          @change="recordListSelect"
          :loading="data.loading.loadingRecordList"
        >
          <el-option
            v-for="item in data.recordList.data"
            :key="item.value"
            :label="item.record_name"
            :value="item.record_id"
          />
        </el-select>
      </div>
    </div>
    <!-- 页面内容 -->
    <div class="content">
      <!-- 排名前10的礼物 -->
      <div class="model gift_top">
        <!-- 标题 -->
        <div class="model_head gift_top_head">
          <div class="gift_top_head_left">排名前10的礼物-数量</div>
        </div>
        <div id="gift_top_num_box" v-loading="data.loading.loadingGiftTopNum" class="model_content gift_top_box" v-show="data.giftTopNumCharts"></div>
      </div>
      <div class="model gift_top">
        <!-- 标题 -->
        <div class="model_head gift_top_head">
          <div class="gift_top_head_left">排名前10的礼物-总价值</div>
        </div>
        <div id="gift_top_price_box" v-loading="data.loading.loadingGiftTopPrice" class="model_content gift_top_box" v-show="data.giftTopPriceCharts"></div>
      </div>
      <div class="model gift_top">
        <!-- 标题 -->
        <div class="model_head gift_top_head">
          <div class="gift_top_head_left">排名前10的礼物-单价</div>
        </div>
        <div id="gift_top_gift_price_box" v-loading="data.loading.loadingGiftTopGiftPrice" class="model_content gift_top_box" v-show="data.giftTopGiftPriceCharts"></div>
      </div>
      <!-- 详细数据 -->
      <div class="model detail_box">
        <div class="model_head detail_box_head">
          详细数据
        </div>
        <!-- 数据内容 -->
        <div v-loading="data.loading.loadingDetailContent" id="detail_content" class="model_content detail_content">
          <el-table :data="data.detail.data" :row-class-name="tableRowClassName" stripe style="width: 100%">
            <el-table-column prop="gift_name" label=" 礼物名" />
            <el-table-column prop="gift_price" label="礼物单价" />
            <el-table-column prop="price" label="总价" />
            <el-table-column prop="name" label="赠送人" />
            <el-table-column prop="num" label="礼物数量" />
          </el-table>
          <el-pagination
            background
            v-model:current-page="data.getDetailOption.page"
            :page-size="data.getDetailOption.page_size"
            :page-sizes="[10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.detail.total"
            @size-change="onPageSizeChange"
            @current-change="onPageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import http from '@/http/http'
import * as echarts from 'echarts'
const data = reactive({
  giftTopNumCharts: true,
  giftTopGiftPriceCharts: true,
  giftTopPriceCharts: true,
  roomList: {
    defaultActive: '-',
    data: [
      {
        room_name: '-',
        room_id: '-'
      }
    ]
  },
  recordList: {
    defaultActive: '-',
    data: [
      {
        record_name: '-',
        record_id: '-'
      }
    ]
  },
  getDetailOption: {
    page: 1,
    page_size: 10
  },
  detail: {},
  loading: {
    loadingRoomList: true,
    loadingGiftTopNum: true,
    loadingGiftTopPrice: true,
    loadingGiftTopGiftPrice: true,
    loadingTrendContent: true,
    loadingDetailContent: true,
    loadingRecordList: true
  },
  increase_icon_src: 'https://www.helloimg.com/images/2022/04/02/RJWxYR.png',
  decline_icon_src: 'https://www.helloimg.com/images/2022/04/02/RJWJXz.png'
})

onMounted(() => {
  setRoomList()
})
/**
 * 获取并渲染 房间 数据
 */
const setRoomList = () => {
  data.loading.loadingRoomList = true
  http
    .request({
      url: '/Index/getRoomList',
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.roomList.defaultActive = res.data[0].room_id
        data.roomList.data = res.data
        data.loading.loadingRoomList = false
        setRecordList()
      }
    })
}
/**
 * 获取并渲染 直播记录 数据
 */
const setRecordList = () => {
  data.loading.loadingRecordList = true
  http
    .request({
      url: '/Index/getRecordList',
      data: {
        room_id: data.roomList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.recordList.defaultActive = res.data[0].record_id
        data.recordList.data = res.data
        data.loading.loadingRecordList = false
        setDetailData()
        for (let i = 1; i <= 3; i++) {
          setGiftTop(res.data[0].record_id, i)
        }
      }
    })
}
const setGiftTop = (recordId, type) => {
  let unit = ''
  switch (type) {
    case 1:
      data.loading.loadingGiftTopNum = true
      unit = '数量'
      // data.giftTopNumCharts = false
      break
    case 2:
      data.loading.loadingGiftTopPrice = true
      unit = '总价值'
      // data.giftTopPriceCharts = false
      break
    case 3:
      data.loading.loadingGiftTopGiftPrice = true
      unit = '单价'
      // data.giftTopGiftPriceCharts = false
      break
  }
  http
    .request({
      url: '/Index/getGiftTopTen',
      // 解除请求频繁限制
      special: true,
      data: {
        record_id: recordId,
        type: type
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        const x = []
        const y = []
        let numChart = ''
        let numOption = ''
        let priceChart = ''
        let priceOption = ''
        let giftPriceChart = ''
        let giftPriceOption = ''
        for (const item of res.data) {
          x.unshift(item.gift_name)
          switch (type) {
            case 1:
              y.unshift(item.num)
              break
            case 2:
              y.unshift(item.price)
              break
            case 3:
              y.unshift(item.gift_price)
              break
          }
        }
        numChart = echarts.init(document.getElementById('gift_top_num_box')) // 初始化
        priceChart = echarts.init(document.getElementById('gift_top_price_box')) // 初始化
        giftPriceChart = echarts.init(document.getElementById('gift_top_gift_price_box')) // 初始化
        /**
         * 当页面大小发生改变时重绘
         */
        window.onresize = function () {
          numChart.resize()
          priceChart.resize()
          giftPriceChart.resize()
        }
        switch (type) {
          case 1:
            data.loading.loadingGiftTopNum = false
            data.giftTopNumCharts = true
            numChart.clear()
            data.giftTop = res.data
            numOption = {
              title: {
                text: 'Top'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {},
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
              },
              yAxis: {
                type: 'category',
                data: x
              },
              series: [
                {
                  name: unit,
                  type: 'bar',
                  data: y,
                  itemStyle: {
                    normal: {
                      color: (e) => {
                        const colorList = ['#70f3ff', '#ff461f', '#bce672', '#eaff56', '#4b5cc4', '#426666', '#801dae', '#b25d25', '#758a99', '#789262']
                        return colorList[e.dataIndex]
                      }
                    }
                  }
                }
              ]
            }
            numChart.setOption(numOption)
            break
          case 2:
            data.loading.loadingGiftTopPrice = false
            data.giftTopPriceCharts = true
            priceChart.clear()
            priceOption = {
              title: {
                text: 'Top'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {},
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
              },
              yAxis: {
                type: 'category',
                data: x
              },
              series: [
                {
                  name: unit,
                  type: 'bar',
                  data: y,
                  itemStyle: {
                    normal: {
                      color: (e) => {
                        const colorList = ['#70f3ff', '#ff461f', '#bce672', '#eaff56', '#4b5cc4', '#426666', '#801dae', '#b25d25', '#758a99', '#789262']
                        return colorList[e.dataIndex]
                      }
                    }
                  }
                }
              ]
            }
            priceChart.setOption(priceOption)
            break
          case 3:
            data.loading.loadingGiftTopGiftPrice = false
            data.giftTopGiftPriceCharts = true
            giftPriceChart.clear()
            data.giftTop = res.data
            giftPriceOption = {
              title: {
                text: 'Top'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'shadow'
                }
              },
              legend: {},
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
              },
              yAxis: {
                type: 'category',
                data: x
              },
              series: [
                {
                  name: unit,
                  type: 'bar',
                  data: y,
                  itemStyle: {
                    normal: {
                      color: (e) => {
                        const colorList = ['#70f3ff', '#ff461f', '#bce672', '#eaff56', '#4b5cc4', '#426666', '#801dae', '#b25d25', '#758a99', '#789262']
                        return colorList[e.dataIndex]
                      }
                    }
                  }
                }
              ]
            }
            giftPriceChart.setOption(giftPriceOption)
            break
        }
      }
    })
}
/**
 * 获取并渲染 详细数据
 */
const setDetailData = () => {
  data.loading.loadingDetailContent = true
  http
    .request({
      url: '/Index/getGiftList',
      data: {
        page: data.getDetailOption.page,
        page_size: data.getDetailOption.page_size,
        record_id: data.recordList.defaultActive
      },
      method: 'POST'
    })
    .then((res) => {
      if (res.status === 200) {
        data.detail = res.data
        data.loading.loadingDetailContent = false
      }
    })
}
const tableRowClassName = (e) => {
  if (e.row.leave_probability < 0) {
    return 'warning-row'
  }
}
const onPageChange = (e) => {
  data.getDetailOption.page = e
  setDetailData(data.getDetailOption)
}
const onPageSizeChange = (e) => {
  data.getDetailOption.page_size = e
  setDetailData(data.getDetailOption)
}
/**
 * 切换房间
 */
const roomListSelect = (e) => {
  data.getDetailOption.page = 1
  data.getDetailOption.page_size = 10
  setRecordList()
}
/**
 * 切换记录
 */
const recordListSelect = (e) => {
  console.log(e)
  data.getDetailOption.page = 1
  data.getDetailOption.page_size = 10
  setDetailData()
  for (let i = 1; i <= 3; i++) {
    setGiftTop(e, i)
  }
}
</script>

<style lang="scss" scoped>
$shadow: 0 2px 10px 0 rgb(0, 0, 0, 0.1); // 阴影
/**.gift_top_box
    礼物排名 数据
*/
.gift_top_box {
  width: 100%;
  height: 400px;
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
</style>
